call() apply() and bind()

这三个函数挺有意思的, 每次第一眼看到就会困扰很长时间, 但是一看资料就又懂了, 毕竟在其它地方看到的时候, 都是和其它的杂糅在一起, 而看资料讲的是最基础的

为什么

Use .bind() when you want that function to later be called with a certain context, useful in events. Use .call() or .apply() when you want to invoke the function immediately, and modify the context.

Call/apply call the function immediately, whereas bind returns a function that, when later executed, will have the correct context set for calling the original function. This way you can maintain context in async callbacks and events. https://stackoverflow.com/a/15455043/11485234

call() apply() bind() 这三个东西简单的来说就是控制函数的 this 指向的

call() 的参数是一个一个的

apply() 的参数是一个数组

bind() 相比其它两个是先解决 this, 而后当作正常的 function 进行调用

如何理解

var student = {
  name: 'vhxubo'
};

var say = function(begin, end) {
  console.log(begin + this.name + end);
}

say.call(student, "Hello ", ".");
say.apply(student, ["Hello ", "."]);

var stu = say.bind(student);
stu("Hello ", ".");

// Hello vhxubo.
// Hello vhxubo.
// Hello vhxubo.

可以发现, 上述的三种方法的输出结果都是一样的

换种思路理解一下

say.call(student, "Hello ", "."); or say.apply(student, ["Hello ", "."]); => student.say("Hello ", ".");

使用 call() 或者 apply() 的第一个参数 (student) 替换最前面的 function (say), 并将 call() 或者 apply() 替换成方法名 (say) , 这种可能会更好理解一些